import React, { Component } from "react";

export default class App extends Component {
  state = {
    name: "xiaozheng",
  };
  // 可以处理props和state，处理完成以后返回一个新的state
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log("getDerivedStateFromProps", nextProps, nextState);
    return {
      name:
        nextState.name.substring(0, 1).toUpperCase() +
        nextState.name.substring(1),
    };
  }

  getSnapshotBeforeUpdate = (prevProps, prevState) => {
    console.log("getSnapshotBeforeUpdate", prevProps, prevState);
    return 111;
  };

  componentDidUpdate(prevProps, prevState, test) {
    console.log("componentDidUpdate", prevProps, prevState, test);
  }

  render() {
    return (
      <div>
        <div>{this.state.name}</div>
        <button onClick={() => this.setState({ name: "xiaoming" })}>
          点击
        </button>
      </div>
    );
  }
}
